
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基于WebSocket 简易聊天室</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script type="text/javascript" src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
    <div class="container main">

    </div>
    <div class="container">
        <form class="form-horizontal col-sm-12" role="form">
            <div class="form-group">
                <label for="in_cmd" class="col-sm-2 control-label">指令 &nbsp;</label>
                <div class="col-sm-10">
                    <input id="in_cmd" class="form-control" value=""/>
                </div>
                <button type="button" id="btn_send" class="btn btn-default">发送指令</button>
                <button type="button" id="btn_exit" class="btn btn-danger">离开聊天室</button>
                <button type="button" id="btn_clear" class="btn btn-primary">clear</button>
                <button type="button" id="btn_schedule" class="btn btn-danger">排班</button>
                <button type="button" id="btn_test" class="btn btn-success">测试</button>
                <button type="button" id="btn_fire" class="btn btn-danger">Fire</button>
            </div>
        
        </form>
    </div>
<div class="container web_log">

</div>
</body>

<script type="text/javascript">
    var loger = $('.web_log');
    function push_log(msg){
        loger.append('<p class="text-info">'+msg+'</p>');
    }
    function push_err(msg){
        loger.append('<p class="text-danger">'+msg+'</p>');
    }
    function init(){
        $('.main').html("");
        var ws = new WebSocket('ws://ws.xinyu126.com:5128/admin');
        ws.onopen = function () {
            push_log("建立 websocket 连接...");
        };
        ws.onmessage = function (event) {
            push_log("收到消息：" + event.data);
            var data = JSON.parse(event.data);
            console.info(data);
            if (data.action=="new_cli") {
                var cliData = data.data;// index,user_id,patient_list
                plist = "";
                for(var idx in cliData.patient_list){
                    var p = cliData.patient_list[idx];
                    if(p.selected){
                        plist += '<a data-cid="'+cliData.index+'" data-pno="'+p['patCardNo']+'" title="'+p['patCardNo']+'" class="btn btn-primary">'+p['patientName']+'</a>'
                    }else{
                        plist += '<a data-cid="'+cliData.index+'" data-pno="'+p['patCardNo']+'" title="'+p['patCardNo']+'" class="btn btn-default">'+p['patientName']+'</a>'

                    }
                }
                var ocid = "cid_"+cliData.index;
                if($("#"+ocid).length>0){
                    $("#"+ocid).html(plist);
                }else{
                    str = '<div class="col-sm-12"><i>'+cliData.index+'</i><u>'+cliData.user_id+'</u><div id="'+ocid+'">'+plist+'</div></div>';
                    $('.main').append(str);
                }
                $('.main a.btn').off('click');
                $('.main a.btn').on('click',function(){
                    var $this = $(this);
                    var cid = $this.data('cid');  
                    var pno = $this.data('pno');  
                    obj = {"data":{cid:cid,'card_no':pno},"action":"patient"}
                    ws.send(JSON.stringify(obj));
                  });
            }
        };
        ws.onclose = function () {
            push_err("关闭 websocket 连接...");
            ws = null;
        }
    
       $('#btn_send').click(function () {
            var msg = $('#in_cmd').val();
            if (ws) {
                obj = {"data":msg,"action":"cookie"}
                ws.send(JSON.stringify(obj));
                push_log("发送消息：" + msg)
            }else{
                push_err("请先建立连接");
            }
        });
        //客户端发送消息到服务器
        $('#btn_send_all').click(function () {
            var msg = $('#in_room_msg').val();
            if (ws) {
                ws.send(msg);
                push_log("发送消息：" + msg)
            }else{
                push_err("请先建立连接");
            }
        });
        // 退出聊天室
        $('#btn_exit').click(function () {
            if (ws) {
                ws.close();
                push_err("close websocket")
            }
            init();
        });
        $('#btn_clear').click(function () {
            loger.html('')  
        });
        $('#btn_fire').click(function () {
            ws.send(JSON.stringify({"action":"fire","data":{}}))
        });
        $('#btn_test').click(function () {
            ws.send(JSON.stringify({"action":"test","data":{}}))
        });
        $('#btn_schedule').click(function () {
            ws.send(JSON.stringify({"action":"schedule","data":{}}))
        });
    }
    $(document).ready(function () {
        init();
    });
</script>
</html>